<template>
  <div v-if="loginState === false">
    <input type="text" placeholder="请输入用户名称" v-model="username">
    <input type="password" placeholder="请输入密码" v-model="password">
    <button @click="doLogin">登录</button>
  </div>
  <div v-else>
    <h3>欢迎你{{loginName }}</h3><button @click="doLoginOut">退出</button>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'

export default {
  name: 'HelloWorld',
  data:function(){
    return {
      username:'',
      password:''
    }
  },
  computed: {
    //将需要使用的state中的属性，混入到当前组件的computed中
    // ...mapState(['shopCartItems','isLogin'])
    ...mapState({
      loginState:'isLogin',
      loginName:'loginName'
    })    
  },
  methods:{
    // ...mapMutations(['loginIn','loginOut']),
    ...mapMutations({
        loingStoreIn:'loginIn',
        loingStoreOut:'loginOut'
    }),
    doLogin:function(){
      if(this.username !== '' && this.password === '123'){
        // this.$store.commit('loginIn',this.username)
        this.loingStoreIn(this.username)
      }else{
        alert('对不起，用户名密码不正确！')
      }
    },
    doLoginOut(){
      this.username=''
      this.password=''
      // this.$store.commit('loginOut')
      this.loingStoreOut()
    }
  }
}
</script>

